<link rel="stylesheet" href="assets/module/city-picker/city-picker.css"/>
<script src="assets/module/city-picker/city-picker.data.js"></script>
<link rel="stylesheet" href="assets/module/formSelects/formSelects-v4.css"/>
<style>
    /* 城市选择器超出输入框隐藏 */
    #pageDialog .city-picker-span {
        overflow: hidden !important;
    }

    /* 表单标题加虚线 */
    .form-item-title {
        text-align: center;
        position: relative;
    }

    .form-item-title:before {
        content: "";
        position: absolute;
        border-top: 1px dashed #ccc;
        left: 40px;
        right: 40px;
        top: 8px;
        z-index: -1;
    }

    .form-item-title > span {
        background-color: white;
        padding: 0 10px;
        font-size: 13px;
        color: #666;
    }

</style>

<!-- 正文开始 -->
<div class="layui-fluid" id="pageDialog">
    <div class="layui-card">
        <div class="layui-card-header">效果演示</div>
        <div class="layui-card-body text-center" style="padding: 80px 0px;">
            <button id="btnDialog1" class="layui-btn">表单弹窗</button>
            <button id="btnDialog2" class="layui-btn">最大最小化</button>
            <button id="btnDialog3" class="layui-btn">确认弹窗</button>
            <br><br>
            <button id="btnDialog4" class="layui-btn">输入弹窗</button>
            <button id="btnDialog5" class="layui-btn">更改主题</button>
            <br><br>
            <button id="btnDialog6" class="layui-btn layui-btn-normal">地图选择位置经纬度</button>
            <button id="btnDialog7" class="layui-btn layui-btn-normal">裁剪图片弹窗</button>
            <br><br>
            <button id="btnDialog8" class="layui-btn layui-btn-normal">表单固定底部按钮</button>
            <button id="btnDialog9" class="layui-btn layui-btn-normal">表单双排并列样式</button>
        </div>
    </div>
</div>

<!-- 固定底部按钮 -->
<script type="text/html" id="modelPtInfo">
    <form id="modelFormPtInfo" lay-filter="modelFormPtInfo" class="layui-form model-form no-padding">
        <input name="ptId" type="hidden"/>
        <div class="model-form-body" style="max-height: 320px;">
            <div class="layui-form-item">
                <label class="layui-form-label">实习公司</label>
                <div class="layui-input-block">
                    <input name="companyName" placeholder="请输入实习公司" type="text" class="layui-input"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">实习岗位</label>
                <div class="layui-input-block">
                    <input name="jobName" placeholder="请输入实习岗位" type="text" class="layui-input"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">实习类型</label>
                <div class="layui-input-block">
                    <select name="ptTypeId" lay-verType="tips" lay-verify="required" required>
                        <option value="">请选择</option>
                        <option value="1">顶岗实习</option>
                        <option value="2">跟岗实习</option>
                        <option value="3">毕业实习</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公司地址</label>
                <div class="layui-input-block">
                    <input name="companyAddress" placeholder="请输入公司地址" type="text" class="layui-input"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公司联系人</label>
                <div class="layui-input-block">
                    <input name="companyContact" placeholder="请输入公司联系人" type="text" class="layui-input"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">起止日期</label>
                <div class="layui-input-block">
                    <input name="dateRange" placeholder="请选择起止日期" type="text" class="layui-input" autocomplete="off"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="comments" placeholder="请输入备注" class="layui-textarea" maxlength="500"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right model-form-footer">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="modelSubmitPtInfo" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- 双排表单 -->
<script type="text/html" id="modelSDKAuth">
    <form id="modelFormSDKAuth" lay-filter="modelFormSDKAuth" class="layui-form layui-row model-form">
        <input name="authId" type="hidden"/>
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择公司</label>
                    <div class="layui-input-block">
                        <select name="companyId" lay-search="true" lay-verType="tips" lay-verify="required" required>
                            <option value="">请选择公司</option>
                            <option value="1">公司一</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">应用名称</label>
                    <div class="layui-input-block">
                        <input name="appName" placeholder="请输入应用名称" type="text" class="layui-input" maxlength="100"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input name="price" placeholder="请输入价格" type="number" class="layui-input"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">应用类型</label>
                    <div class="layui-input-block">
                        <select name="deviceIds" xm-select="deviceIds" lay-verType="tips" lay-verify="required"
                                required>
                            <option value="1">Android</option>
                            <option value="2">IOS</option>
                            <option value="3">Web</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item form-item-title"><span>Android配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">包名</label>
                    <div class="layui-input-block">
                        <input name="packageName" placeholder="请输入包名" type="text" class="layui-input"
                               lay-verType="tips"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">SHA1</label>
                    <div class="layui-input-block">
                        <input name="sha1" placeholder="请输入SHA1" type="text" class="layui-input" lay-verType="tips"/>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item form-item-title"><span>IOS配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Bundle Identifier</label>
                    <div class="layui-input-block">
                        <textarea name="bundle" placeholder="请输入BundleIdentifier" class="layui-textarea"
                                  lay-verType="tips"></textarea>
                    </div>
                </div>
                <div class="layui-form-item form-item-title"><span>Web配置</span></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Referer<br/>白名单</label>
                    <div class="layui-input-block">
                        <textarea name="referer" placeholder="请输入Referer白名单，用逗号分隔" class="layui-textarea layui-disabled"
                                  lay-verType="tips" disabled></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="modelSubmitSDKAuth" lay-submit>保存</button>
        </div>
    </form>
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'admin', 'citypicker', 'form', 'laydate', 'formSelects'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;
        var cityPicker = layui.citypicker;
        var laydate = layui.laydate;
        var form = layui.form;
        var formSelects = layui.formSelects;

        // 表单弹窗
        $('#btnDialog1').click(function () {
            admin.open({
                id: 'pswForm',
                title: '修改密码',
                shade: 0,
                area: '360px',
                url: 'components/tpl/password.html'
            });
        });

        // 最大化最小化
        $('#btnDialog2').click(function () {
            admin.open({
                type: 2,
                title: '百度一下',
                shade: 0,
                maxmin: true,
                resize: true,
                area: ['640px', '480px'],
                content: 'https://baidu.com'
            });
        });

        // 询问弹窗
        $('#btnDialog3').click(function () {
            layer.confirm('确认删除吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (index) {
                layer.close(index);
            });
        });

        // 输入弹窗
        $('#btnDialog4').click(function () {
            layer.prompt({
                skin: 'layui-layer-admin layui-layer-prompt',
                shade: .1
            }, function (value, index, elem) {
                layer.close(index);
            });
        });

        // 更改主题
        $('#btnDialog5').click(function () {
            $('#btnDialog1').trigger('click');
            admin.popupRight({
                id: 'layer-theme',
                url: 'components/tpl/theme.html'
            });
        });

        // 地图选择位置
        $('#btnDialog6').click(function () {
            admin.chooseLocation({
                needCity: true,
                onSelect: function (res) {
                    layer.msg(JSON.stringify(res), {icon: 1});
                }
            });
        });

        // 裁剪图片弹窗
        $('#btnDialog7').click(function () {
            admin.cropImg({
                imgSrc: 'assets/images/15367146917869444.jpg',
                onCrop: function (res) {
                    layer.msg('<img src="' + res + '" width="220px" height="220px"/>');
                }
            });
        });

        // 固定底部按钮
        $('#btnDialog8').click(function () {
            admin.open({
                type: 1,
                title: '添加学生实习信息',
                content: $('#modelPtInfo').html(),
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // 时间范围选择
                    laydate.render({
                        elem: '#modelFormPtInfo input[name="dateRange"]',
                        range: true
                    });
                    form.render('select');
                    // 表单提交事件
                    form.on('submit(modelSubmitPtInfo)', function (data) {
                        layer.msg(JSON.stringify(data.field), {icon: 1});
                        return false;
                    });

                }
            });

        });

        // 双排表单
        $('#btnDialog9').click(function () {
            admin.open({
                type: 1,
                title: '添加授权',
                area: '745px',
                content: $('#modelSDKAuth').html(),
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    form.render('select');
                    formSelects.render('deviceIds', {init: []});
                    formSelects.btns('deviceIds', ['select', 'remove', 'reverse'], {space: '10px'});

                }
            });

        });

    });
</script>